<template>
  <div>
    <!-- 第一种写法：执行少量代码 -->
    <p>{{ num }}</p>
    <button @click="num++">+1</button>

    <!-- 第二中写法：methods中的函数名 -->
    <button @click="fn">点击</button>

    <!-- 第三种写法：传实参 -->
    <button @click="fn1(12)">按钮</button>
    <br />
    <br />
    <!-- 案例练习 -->
    <div class="box">
      <button @click="salary(3000)">发工资啦，我的工资是3000</button>
      <button @click="salary(-2800)">给喜欢的女主播刷了火箭-2800</button>
      <button @click="salary(10000)">送外卖赚了10000</button>
      <button @click="salary(-18000)">给暗恋的女生买了爱马仕-18000</button>
      <button @click="salary(8000)">晚上去做代驾赚了8000</button>
      <button @click="salary(-100)">买泡面100</button>
      <button @click="salary(-50)">买挂逼水50</button>
      <p>我这个月还剩余{{ money }}元</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      money: 0,
    }
  },
  methods: {
    //methods中要使用data中的数据时 一定要加this，这个this是指vue实例
    //第二种写法
    fn() {
      this.num++
      console.log(this.num)
    },

  //第三种写法传参
    fn1(a) {
      //this.num=this.num+a
      this.num += a
      console.log(this.num)
    },

  //案例
    salary(a){
      //this.money=this.money+a
      this.money+=a
    }
  },
}
</script>

<style lang="less">
.box {
  width: 300px;
  height: 500px;
  background-color: bisque;
}
</style>
